<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/layui/css/layui.css">
  <link rel="stylesheet" href="/css/custom.form.css">
</head>
<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<body>
<div class="panel panel-default operation" hidden>
  <div class="panel-heading title"></div>
<div class="layui-card-body">
<form class="layui-form " action="" lay-filter="info" style="width: 700px;margin-top: 10px">
      <input name="id" hidden/>
        <div class="layui-form-item">
      <label class="layui-form-label">保单号</label>
      <div class="layui-input-block">
        <input type="policNo" name="policNo" placeholder="请输入保单号" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">分公司</label>
      <div class="layui-input-block">
        <input type="companyId" name="companyId" placeholder="请输入分公司" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">来电号码</label>
      <div class="layui-input-block">
        <input type="callingNum" name="callingNum" placeholder="请输入来电号码" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">被叫号码</label>
      <div class="layui-input-block">
        <input type="calledNum" name="calledNum" placeholder="请输入被叫号码" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">开始时间</label>
      <div class="layui-input-block">
        <input type="sdt" name="sdt" placeholder="请输入开始时间" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">结束时间</label>
      <div class="layui-input-block">
        <input type="edt" name="edt" placeholder="请输入结束时间" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">通话时长</label>
      <div class="layui-input-block">
        <input type="tt" name="tt" placeholder="请输入通话时长" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">行政组</label>
      <div class="layui-input-block">
        <input type="xzz" name="xzz" placeholder="请输入行政组" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">坐席姓名</label>
      <div class="layui-input-block">
        <input type="zxxm" name="zxxm" placeholder="请输入坐席姓名" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">满意度</label>
      <div class="layui-input-block">
        <input type="myd" name="myd" placeholder="请输入满意度" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">回访类型</label>
      <div class="layui-input-block">
        <input type="hflx" name="hflx" placeholder="请输入回访类型" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">来源标识</label>
      <div class="layui-input-block">
        <input type="lybs" name="lybs" placeholder="请输入来源标识" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">任务分配时间</label>
      <div class="layui-input-block">
        <input type="rwdt" name="rwdt" placeholder="请输入任务分配时间" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">要求完成时间</label>
      <div class="layui-input-block">
        <input type="yqdt" name="yqdt" placeholder="请输入要求完成时间" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">是否暂存</label>
      <div class="layui-input-block">
        <input type="sfzc" name="sfzc" placeholder="请输入是否暂存" autocomplete="off" class="layui-input">
      </div>
    </div>
  <div class="layui-form-item">
  <div class="layui-input-block">
    <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit">保存</button>
    <button  class="layui-btn layui-btn-primary" id="btn_cancel">返回</button>
  </div>
</div>
</form>
</div>
</div>

<div class="table_div">
  <div id="searchParam"  shiro:hasPermission="phoneAgentTaskTest:list">
  <div id="searchDiv" width="100%"></div>
  <!-- <iframe id="searchIframe" src="./search.html" width="1320" height="400" frameborder="0" scrolling="no"></iframe> -->
	<div class="" style="text-align: center">
      <button class="layui-btn" onclick="search()"  id="search">查询</button>
      <button class="layui-btn" onclick="searchReset()"  id="reset">重置</button>
      <!-- <button class="layui-btn" id="export">导出全部</button> -->
    </div>
<!--     <div class="layui-form-item">
      <div class="layui-input-inline">
        <input type="text" id="key" class="layui-input"  autocomplete="off" placeholder="请输入">
      </div>

      <div class="layui-input-inline ">
        <button class="layui-btn" onclick="search()"  id="search">查询</button>
        <button class="layui-btn"   id="export">导出全部</button>
      </div>
    </div> -->

  </div>
  <table class="layui-table" id="showTable" lay-filter="showTable" ></table>
</div>
<script type="text/html" id="toolbar">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add"  shiro:hasPermission="phoneAgentTaskTest:add">添加</button>
    <button class="layui-btn layui-btn-sm" lay-event="batchDeleted" shiro:hasPermission="phoneAgentTaskTest:delete">删除</button>
  </div>
</script>
<script type="text/html" id="tool">
  <a class="layui-btn layui-btn-xs" lay-event="edit" shiro:hasPermission="phoneAgentTaskTest:update">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" shiro:hasPermission="phoneAgentTaskTest:delete">删除</a>
</script>

</body>
</html>
<script>
  //获取token
  var token = CoreUtil.getData("access_token");
  //地址栏转义token中的#号
  var tokenQuery = token.replace("#", "%23");
  var tableIns1;
  var table = layui.table;
  var form = layui.form;
  var layer = layui.layer;
  var $ = jQuery = layui.jquery;
  var laydate = layui.laydate;
  //录音时间
  var rstartTime = null;
  var rendTime = null;
  //分配时间
  var astartTime = null;
  var aendTime = null;
  //完成时间
  var fstartTime = null;
  var fendTime = null;
  $('#searchDiv').load("./search.html",function(){
	  layui.use(['table', 'layer', 'laydate'], function () {
			//$('#searchDiv').load("./search.html");
		    //加载table
		    tableIns1 = table.render({
		      elem: '#showTable'
		      , contentType: 'application/json'
		      , headers: {"authorization": token}
		      , page: true //开启分页
		      , url: '/phoneAgentTaskTest/listByPage' //数据接口
		      , method: 'POST'
		      , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
		        return {
		          "code": res.code, //解析接口状态
		          "msg": res.msg, //解析提示文本
		          "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
		          "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
		        }
		      }
		      , cols: [
		        [
		          {type: 'checkbox', fixed: 'left'},
		          {field: 'id', title: '主键', sort: true},
		          {field: 'policNo', title: '保单号', sort: true},
		          {field: 'companyId', title: '分公司', sort: true},
		          {field: 'callingNum', title: '来电号码', sort: true},
		          {field: 'calledNum', title: '被叫号码', sort: true},
		          {field: 'sdt', title: '开始时间', sort: true},
		          {field: 'edt', title: '结束时间', sort: true},
		          {field: 'tt', title: '通话时长', sort: true},
		          {field: 'xzz', title: '行政组', sort: true},
		          {field: 'zxxm', title: '坐席姓名', sort: true},
		          {field: 'myd', title: '满意度', sort: true},
		          {field: 'hflx', title: '回访类型', sort: true},
		          {field: 'lybs', title: '来源标识', sort: true},
		          {field: 'rwdt', title: '任务分配时间', sort: true},
		          {field: 'yqdt', title: '要求完成时间', sort: true},
		          {field: 'sfzc', title: '是否暂存', sort: true},
		          {width: 120, toolbar: "#tool", title: '操作'}
		        ]
		      ]
		      , toolbar: '#toolbar'
		    });


		    //表头工具
		    table.on('toolbar(showTable)', function(obj){
		      switch(obj.event){
		        case 'batchDeleted':
		          var checkStatus = table.checkStatus(obj.config.id);
		          var data = checkStatus.data;
		          if(data.length==0){
		            layer.msg("请选择要批量删除的列");
		          }else {
		            var ids = [];
		            $(data).each(function (index,item) {
		              ids.push(item.id);
		            });
		            tipDialog(ids);
		          }
		          break;
		        case 'add':
		          $(".table_div").hide();
		          $(".operation").show();
		          $(".title").html("新增");
		          $(".operation input[name=id]").val("");
		          $(".operation input[name=policNo]").val("");
		          $(".operation input[name=companyId]").val("");
		          $(".operation input[name=callingNum]").val("");
		          $(".operation input[name=calledNum]").val("");
		          $(".operation input[name=sdt]").val("");
		          $(".operation input[name=edt]").val("");
		          $(".operation input[name=tt]").val("");
		          $(".operation input[name=xzz]").val("");
		          $(".operation input[name=zxxm]").val("");
		          $(".operation input[name=myd]").val("");
		          $(".operation input[name=hflx]").val("");
		          $(".operation input[name=lybs]").val("");
		          $(".operation input[name=rwdt]").val("");
		          $(".operation input[name=yqdt]").val("");
		          $(".operation input[name=sfzc]").val("");
		          break;
		      };
		    });
		    //列操作
		    table.on('tool(showTable)',function (obj) {
		      var data = obj.data;
		      switch (obj.event) {
		        case 'del':
		          var ids=[];
		          ids.push(data.id);
		          tipDialog(ids);
		          break;
		        case 'edit':
		          $(".table_div").hide();
		          $(".operation").show();
		          $(".title").html("编辑");
		          $(".operation input[name=id]").val(data.id);
		          $(".operation input[name=policNo]").val(data.policNo);
		          $(".operation input[name=companyId]").val(data.companyId);
		          $(".operation input[name=callingNum]").val(data.callingNum);
		          $(".operation input[name=calledNum]").val(data.calledNum);
		          $(".operation input[name=sdt]").val(data.sdt);
		          $(".operation input[name=edt]").val(data.edt);
		          $(".operation input[name=tt]").val(data.tt);
		          $(".operation input[name=xzz]").val(data.xzz);
		          $(".operation input[name=zxxm]").val(data.zxxm);
		          $(".operation input[name=myd]").val(data.myd);
		          $(".operation input[name=hflx]").val(data.hflx);
		          $(".operation input[name=lybs]").val(data.lybs);
		          $(".operation input[name=rwdt]").val(data.rwdt);
		          $(".operation input[name=yqdt]").val(data.yqdt);
		          $(".operation input[name=sfzc]").val(data.sfzc);
		          break;
		      }
		    });

		    //导出
		    $('#export').on('click', function () {
		      //原先分页limit
		      var exportParams = {
		        limit: 10000,
		        key: $("#key").val()
		      };
		      CoreUtil.sendPost("/phoneAgentTaskTest/listByPage", exportParams, function (res) {
		        //初始化渲染数据
		        if (res.data != null && res.data.records != null) {
		          table.exportFile(tableIns1.config.id, res.data.records, 'xls');
		        }
		      });
		    });

		    //删除
		    var tipDialog=function (ids) {
		      layer.open({
		        content: "确定要删除么?",
		        yes: function(index, layero){
		          layer.close(index); //如果设定了yes回调，需进行手工关闭
		          CoreUtil.sendDelete("/phoneAgentTaskTest/delete",ids,function (res) {
		            layer.msg(res.msg, {time:1000},function () {
		              search();
		            });
		          });
		        }
		      });
		    };

		    //返回
		    $("#btn_cancel").click(function() {
		      $(".table_div").show();
		      $(".operation").hide();
		      return false;
		    });

		    //监听保存
		    form.on('submit(submit)', function(data){
		      if(data.field.id===undefined || data.field.id===null || data.field.id===""){
		        CoreUtil.sendPost("/phoneAgentTaskTest/add",data.field,function (res) {
		          $(".table_div").show();
		          $(".operation").hide();
		          search();
		        });
		      }else {
		        CoreUtil.sendPut("/phoneAgentTaskTest/update",data.field,function (res) {
		          $(".table_div").show();
		          $(".operation").hide();
		          search();
		        });
		      }

		      return false;
		    });
		    
		    searchInit();
		  });	  
  });

  function searchInit(){
  	//录音时间控件
      laydate.render({
          elem: '#replyDttm'
          , type: 'datetime'
          , range: '~'
          ,trigger:'click'
          , done: function (value, date, endDate) {
              if (value != null && value != undefined && value != "") {
              	rstartTime = value.split("~")[0];
              	rendTime = value.split("~")[1];
              } else {
              	rstartTime = null;
              	rendTime = null;
              }

          }
      });
  	
  	//分配时间控件
      laydate.render({
          elem: '#assignDttm'
          , type: 'datetime'
          , range: '~'
          ,trigger:'click'
          , done: function (value, date, endDate) {
              if (value != null && value != undefined && value != "") {
              	astartTime = value.split("~")[0];
              	aendTime = value.split("~")[1];
              } else {
              	astartTime = null;
              	aendTime = null;
              }

          }
      });
  	
  	//完成时间控件
      laydate.render({
          elem: '#finishDttm'
          , type: 'datetime'
          , range: '~'
          ,trigger:'click'
          , done: function (value, date, endDate) {
              if (value != null && value != undefined && value != "") {
              	fstartTime = value.split("~")[0];
              	fendTime = value.split("~")[1];
              } else {
              	fstartTime = null;
              	fendTime = null;
              }

          }
      });
  	
  	form.render("select");
  };
  
  //执行查询
  function search() {
    //这里以搜索为例
    tableIns1.reload({
      where: { //设定异步数据接口的额外参数，任意设
        key: $("#key").val()
      }
      , page: {
        curr: 1 //重新从第 1 页开始
      }
    });
  };
  
  //执行重置
  function searchReset() {
	$("#searchFm").find("input[type='text']").each(function(){
		$(this).val("");
	})
  }

</script>